<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>资源中心</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../admin/css/other/department.css"/>
    <link rel="stylesheet" href="../../../static/css/bootstrap-icons/bootstrap-icons@1.5.0.css">
</head>
<style>
    .t-click {
        user-select: none;
        font-weight: 500;
    }

    /* zdy主题风格*/
    .dtree-zdy-item-this {
        background-color: rgba(232, 230, 230, 0.86) !important;
    }

    /* 当前选中行样式*/
    .dtree-zdy-item:hover {
        background-color: rgba(242, 242, 242, 0.84) !important;
    }

    /* 行悬停样式*/
    .dtree-zdy-item cite {
        font-size: 14px !important;
    }

    /* 行文字样式*/
    .dtree-zdy-item:hover cite {
        color: #096a3b !important
    }

    /* 行悬停文字样式*/
    .dtree-zdy-dtreefont {
        font-size: 30px !important;
    }

    /* 一级图标、二级图标、复选框样式*/
    .dtree-zdy-ficon {
        color: #2F4056 !important;
    }

    /*一级图标特定样式*/
    .dtree-zdy-icon {
        color: #2F4056 !important;
    }

    /*二级图标特定样式*/
    .dtree-zdy-checkbox:hover {
        color: #11824b !important;
    }

    /*复选框悬停样式*/
    .dtree-zdy-choose {
        color: #11824b !important;
    }

    /* 复选框选中样式*/
    .dtree-icon-xiangyou {
        font-size: 18px !important;
    }

    .dtree-icon-xiangxia1 {
        font-size: 18px !important;
    }

    .dtree-zdy-checkbox {
        font-size: 18px !important;
    }

    .dtree-zdy-item {
        line-height: 50px;
    }


</style>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>公共资源列表</legend>
                </fieldset>

                <form id="queryForm" class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <div class="layui-inline">
                                学科名称
                                </div>
                            <div class="layui-inline">
                                <input type="text" name="courseName" placeholder="请输入学科名称"
                                       lay-verify="required|title" lay-reqText="请输入学科名称"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="resource-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
                <hr>
                <div >
                    <div class="layui-form-item layui-inline">
                        <button id="files_refresh" class="layui-btn  layui-btn-sm" lay-submit lay-filter="files_load">
                            <i class="layui-icon layui-icon-note"></i>
                            所有资源
                        </button>
                        <button id="files_load" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit
                                lay-filter="files_load">
                            <i class="layui-icon layui-icon-download-circle"></i>
                            批量下载
                        </button>
                    </div>
                    <div id="organizationTreeContent"
                         style="overflow: auto;">
                        <ul id="organizationTree" class="dtree organizationTree" data-id="2014"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>

<script>

    layui.use(['table', 'form', 'jquery', 'dtree'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;

        $('#files_refresh').click(function () {
            $.ajax({
                url: '/Resource/getInfo',
                dataType: 'json',
                type: 'post',
                success: function (res) {
                    console.log(res.data);
                    if (res.data !== '') {
                        DTree.reload({
                            data: res.data
                        })
                    } else {
                        DTree.reload({
                            data: []
                        })
                    }
                },
                error: function (res) {
                    console.log(res);
                }
            })

        })

        $("#files_load").click(function () {
            let params = dtree.getCheckbarNodesParam("organizationTree");
            if (params.length === 0) {
                layer.open({
                    title: '提示'
                    , icon: 0
                    , content: '请先选择您要下载的文件'
                });
                return false;
            }
            layer.open({
                title: '批量下载提示',
                content: '<i class="layui-icon layui-icon-download-circle" style="font-size: 35px">' +
                    '&nbsp;' +
                    '</i>是否开始批量下载选中文件'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    let fileIds = new Array()
                    for (let i = 0; i < params.length; i++) {
                        fileIds[i] = params[i].basicData.fileId
                    }
                    layer.msg('开始批量下载文件');
                    let fileForm = $("<form action='/Resource/downloadResByFileId' method='post'></form>")
                    fileForm.append("<input type='hidden' name='fileIds' value='" + JSON.stringify(fileIds) + "'/>")
                    $(document.body).append(fileForm);
                    fileForm.submit();
                    fileForm.remove();
                }
                , btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , cancel: function () {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });

        form.on('submit(resource-query)', function (data) {
            console.log(data.field);
            $.ajax({
                url: '/Resource/selectByCourseName',
                dataType: 'json',
                data: data.field,
                type: 'post',
                success: function (res) {
                    console.log('res.data');
                    console.log(res);
                    if (res.data !== '') {
                        DTree.reload({
                            data: res.data
                        })
                    } else {
                        layer.open({
                            title: '提示'
                            , icon: 5
                            , content: '未找到指定学科资源'
                        });
                    }
                },
                error: function (res) {
                    console.log(res);
                }
            })

            return false;
        })

        //判断是否为图片
        function isImage(ext) {
            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为压缩文件
        function isCompressed(ext) {
            return [
                'zip', 'rar', '7z'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为word类型文件
        function isWord(ext) {
            return [
                'doc', 'docx', 'docm', 'dotm', 'dot'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为excel类型文件
        function isExcel(ext) {
            return ['xlsx', 'xlsm', 'xlsb', 'xls', 'xlt'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为ppt类型文件
        function isPPT(ext) {
            return [
                'ppt', 'pptx', 'pptm', 'potm', 'potx'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为音频类型文件
        function isMusic(ext) {
            return [
                'mp3', 'aac', 'flac', 'wav', 'wma'].indexOf(ext.toLowerCase()) !== -1;
        }

        //判断是否为文本类型文件
        function isText(ext) {
            return [
                'txt', 'ini', 'json', 'csv', 'html', 'htm', 'log', 'bat'].indexOf(ext.toLowerCase()) !== -1;
        }

        let DTree = dtree.render({
            elem: "#organizationTree",
            iconfont: ["layui-icon", "dtreefont", "iconfont"],
            none: "暂无资源数据",
            cache: false,
            initLevel: "1", //默认展开层级为1
            line: false, // 有线树
            // ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
            // icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
            scroll:"#organizationTreeContent",
            method: 'post',
            checkbar: true,
            checkbarType: "all",
            record: true,
            skin: "zdy",
            url: "/Resource/getInfo",
            beforeSend(ajax, self) {
                return true;
            },
            iconfontStyle: [{
                fnode: {  //一级节点
                    node: {  //非叶子节点
                        open: "dtree-icon-xiangxia1",  //节点展开
                        close: "dtree-icon-xiangyou"  //节点关闭
                    },
                    leaf: ""  //叶子节点
                }, snode: {  //二级节点

                    leaf: ""  //叶子节点
                }
            }],
            success: function (res, $obj, first) {
                console.log(res);
            },
            formatter: {
                title: function (data) {  // 示例给有子集的节点返回节点统计
                    //console.log(data);
                    let s = data.title;
                    if (data.last) {
                        let index = s.lastIndexOf(".");
                        let ext = s.substr(index + 1);
                        let icon = '';
                        if (isImage(ext)) {
                            icon = '<i class="bi-file-earmark-image" style="font-size: 25px"></i> '
                        } else if (isCompressed(ext)) {
                            icon = '<i class="bi-file-earmark-zip" style="font-size: 25px"></i> '

                        } else if (isWord(ext)) {
                            icon = '<i class="bi-file-earmark-word" style="font-size: 25px"></i> '

                        } else if (isExcel(ext)) {
                            icon = '<i class="bi-file-earmark-excel" style="font-size: 25px"></i> '

                        } else if (isPPT(ext)) {
                            icon = '<i class="bi-file-earmark-ppt" style="font-size: 25px"></i> '

                        } else if (isMusic(ext)) {
                            icon = '<i class="bi-file-music" style="font-size: 25px"></i> '

                        } else if (isText(ext)) {
                            icon = '<i class="bi-file-earmark-text" style="font-size: 25px"></i> '

                        } else if (ext === 'pdf') {
                            icon = '<i class="bi-file-earmark-pdf" style="font-size: 25px"></i> '

                        } else {
                            icon = '<i class="bi-file-earmark" style="font-size: 25px"></i> '
                        }

                        s = icon + s +
                            ' <span class="layui-badge layui-bg-gray">' +
                            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创建日期:' +
                            data.basicData.createTime +
                            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文件大小:' + data.basicData.filesize
                            + '</span>';
                    }
                    return s;
                }
            },

        });

        // 绑定节点点击事件（单个下载）
        dtree.on("node(organizationTree)", function (obj) {
            console.log(obj.param);
            if (obj.param.leaf === true) {
                layer.open({
                    title: '下载提示',
                    content: '是否开始下载：' + obj.param.context
                    , btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let fileIds = new Array()
                        fileIds[0] = obj.param.basicData.fileId
                        layer.msg('开始下载：' + obj.param.context);
                        let fileForm = $("<form action='/Resource/downloadResByFileId' method='post'></form>")
                        fileForm.append("<input type='hidden' name='fileIds' value='" + JSON.stringify(fileIds) + "'/>")
                        $(document.body).append(fileForm);
                        try {
                            fileForm.submit();
                            fileForm.remove();
                        }catch (e){
                            console.log(e);
                            fileForm.remove();
                        }
                    }
                    , btn2: function (index, layero) {
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    , cancel: function () {
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
                //DTree.clickSpread($div); //调用内置函数展开节点
            }
        });


    })
</script>
</body>
</html>
